<template>
  <div class="content">
    <div class="top">
      <div class="dengji">
        一级会员

      </div>
      <div class="jifen">
        当前积分：200

      </div>
      <router-link to="/my_member">
        <div class="qy-introduce">
          权益介绍
        </div>
      </router-link>
      <div class="huiyuan">
        <div class="line"></div>
        <img class="one" src="./images/yiji-icon.svg">
        <img class="two" src="./images/erji-icon.svg">
        <div>
          二级会员
        </div>
      </div>
      <div class="chaju">离下一等级还差1800分</div>
    </div>
    <ul class="clearfix classify">
      <li>
        <div><img src="./images/birthday-icon.svg" ></div>
        <div class="name">生日特权</div>
      </li>
      <li>
        <div><img src="./images/integral-icon.svg" ></div>
        <div class="name">购物积分</div>
      </li>
      <li>
        <div><img src="./images/pre-icon.svg" ></div>
        <div class="name">专享优惠</div>
      </li>
      <li>
        <div><img src="./images/exchange-icon.svg" ></div>
        <div class="name">积分兑换</div>
      </li>
      <li>
        <div><img src="./images/moreprivilege-icon.svg" ></div>
        <div class="name">更多特权</div>
      </li>
    </ul>
    <router-link to="/my_jfshop">
      <div class="shop">
        <h2>会员积分商城</h2>
        <div>惊喜专属礼品不定期更新</div>
      </div>
    </router-link>

    <div class="clearfix activity">
      <router-link to="/my_choujiang">
      <div class="choujiang">
        <h2 class="my-name">积分抽奖</h2>
        <div class="act-name">积分抽奖，礼品多多</div>
        <div class="see">点我查看</div>
      </div>
      </router-link>
      <div class="chufa">
        <h2 class="my-name">下一站，出发！</h2>
        <div class="act-name">带着家人朋友即刻出发</div>
        <div class="wait">敬请期待</div>
      </div>
    </div>
    <div class="love">
      <h2>温情关怀伴您左右</h2>
      <div>陪伴是最长情的告白</div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return {};
    },
    mounted(){

    },
    methods: {},
    filters: {}
  }
</script>

<style scoped>
  a{
    color: #fff;
  }
  .top {
    position: relative;
    width: 100%;
    height: 9rem;
    background: url('./images/hytqbig-bg.svg') no-repeat center 0;
    background-size: cover;
    color: #fff;
  }
  .dengji {
    font-size: .9rem;
    padding-top: .75rem;
  }
  .jifen {
    font-size: .6rem;
    padding-top: .25rem;
  }
  .qy-introduce {
    font-size: .6rem;
    position: absolute;
    right: 0;
    top: 1.2rem;
    border: 1px solid #fff;
    border-right: hidden;
    border-radius: 100px 0 0 100px;
    padding: .2rem .5rem;
  }
  .huiyuan {
    padding-top: .75rem;
    position: relative;
  }
  .huiyuan .one {
    width: 2.7rem;
    height: 2.7rem;
    left: calc(50% - 1.35rem);
    position: absolute;

  }
  .huiyuan .two {
    position: absolute;
    width: 1.3rem;
    height: 1.3rem;
    right: 1.5rem;
    top: 1.3rem;
  }
  .huiyuan div{
    font-size: .6rem;
    position: absolute;
    right: 1rem;
    top: 3rem;
  }
  .huiyuan .line{
    position:absolute ;
    width: 50%;
    left: 50%;
    top: 1.9rem;
    height: 1px;
    background: #fff;
    border: 1px solid #fff;
  }
  .chaju{
    font-size: .6rem;
    padding-top: 3.2rem;
  }

  .classify{
    background: #fff;
    padding: .5rem 0;
  }
  .classify li{
    width: 20%;
    float: left;
  }
  .classify li .name{
    font-size: .55rem;
    color: #555;
  }

  .shop{
    text-align: left;
    margin: .5rem;
    width: calc(100% - 1rem);
    height: 5rem;
    background: url('./images/jfsc-bg.svg') no-repeat center 0;
    background-size: cover;
    padding: 1.1rem;
  }
  .shop h2{
    font-size: .8rem;
    color: #555;
  }
  .shop div{
    font-size: .5rem;
    color: #808080;
    padding-top: .25rem;
  }

  .activity{
    text-align: left;
    width: 100%;
  }
  .activity .choujiang{
    float: left;
    width: calc(50% - .75rem);
    height: 7rem;
    background: url('./images/jfcj-bg.svg') no-repeat center 0;
    background-size: cover;
    margin-left: .5rem;
    padding: .75rem .5rem;
  }
  .activity .chufa{
    float: right;
    width: calc(50% - .75rem);
    height: 7rem;
    background: url('./images/jflx-bg.svg') no-repeat center 0;
    background-size: cover;
    margin-right: .5rem;
    padding: .75rem .5rem;
  }
  .my-name{
     font-size: .7rem;
     color: #555555;
   }
  .act-name{
    font-size: .5rem;
    color: #929292;
    padding-top: .25rem;
  }
  .see{
    font-size: .7rem;
    color: #FE9640;
    padding-top: .5rem;
  }
  .wait{
    font-size: .7rem;
    color: #70ADFF;
    padding-top: .5rem;
  }

  .love{
    text-align: left;
    margin: .5rem;
    width: calc(100% - 1rem);
    height: 5rem;
    background: url('./images/wqgh-bg.svg') no-repeat center 0;
    background-size: cover;
    padding: 1.1rem;
  }
  .love h2{
    font-size: .8rem;
    color: #555;
  }
  .love div{
    font-size: .5rem;
    color: #808080;
    padding-top: .25rem;
  }


</style>
